<template>
  <div template style="min-height: 100%;" :style="{ visibility: ifhidden }" :class="{ enters: ifhidden == '' }">
    <div class="bgs" :style="{ backgroundImage: 'url(data:image/jpeg;base64,' + backg + ')' }"></div>
    <div class="top">
      <div style="min-width: 375px;height: 100%;">
        <img :src="'data:image/png;base64,' + chflag" @load="getmenus" style="height:100%;" alt="">
        <div class="fr" style="margin-right: 20px; color: yellow;text-align: right;">
          <div style="display: inline-block;padding-top:10px; font-size: 30px;">{{ hours }}</div><br>
          <div style="display: inline-block;position: relative;top:-5px;">{{ min }}:{{ sec }}</div>
        </div>
        <div class="fr" style="margin-right: 30px; color: yellow;text-align: right;cursor: pointer;"
          @click="navshow = !navshow">
          <img style="position: relative;top:15px" src="./assets/menu-dots.png" width="50" alt="">
        </div>
      </div>
    </div>
    <div class="topright">
      <div style="position: absolute;right: 0;max-width: 112px;">
        <div>今年是国家成立</div>
        <div class="numsize">{{ new Date().getFullYear() - 1949 }}</div>
        <div>周年</div>
      </div>
    </div>
    <div style="position: fixed;left:0;top:0;height: 100%;width: 70px;background-color: #6b413c;z-index: 2;">
    </div>
    <div style="position: relative; z-index: 3;" :style="{ minHeight: (winheight - 31.5) + 'px' }">
      <!-- <router-view></router-view> -->
      <homes />
    </div>
    <div class="bottom">
      <img :src="'data:image/png;base64,' + baseimg" style="position: relative;top:4px;" class="heights" alt="">
    </div>
    <div
      style="position: relative; padding: 5px 5px 5px 40px;background-color: #69261e;z-index: 3; border-top: #ccc; white-space: nowrap;color: #fff;box-shadow: 0 -1px 0px 0 #cfcfcf;">
      created：2023-06-20
    </div>
    <!-- menu frame -->
    <div
      style="position: fixed;top:80px;left:0;width: 100%;height: calc(100% - 160px);background-color: #3b3b3bcc;overflow: hidden auto;z-index: 7;"
      :class="{ enters: ifhidden == '' }" v-if="navshow">
      <menus></menus>
    </div>
    <button
      style="position: fixed;bottom:0px;left:0;width: 100%;height: 80px;line-height: 80px; text-align: center;font-size: 20px;background-color: #3b3b3bcc;color: #fff;border-top: 1px solid #ccc;cursor: pointer;z-index: 7;"
      :class="{ enters: ifhidden == '' }" v-if="navshow" @click="navshow = 0">
      关闭
    </button>
  </div>
</template>

<script>
import backg from './assets/bgs.js'
import chflag from './assets/20230620135346.js'
import baseimg from './assets/dc09843960363731fbc9d6e328d92ff9b80e.js'
import menus from './components/menu.vue'
import homes from './views/HomeView.vue'
export default {
  data() {
    return {
      ifhidden: 'hidden',
      hours: '',
      min: '',
      sec: '',
      navshow: 0,
      winheight: '',
      menusarr: [],
      chflag,
      baseimg,
      backg
    }
  },
  components: {
    menus,
    homes
  },
  methods: {
    times() {
      this.hours = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()
      this.min = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      this.sec = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      setTimeout(() => {
        this.times()
      }, 1000)
    },
    tosetdom() {
      this.winheight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    },
    domset() {
      this.tosetdom()
      window.addEventListener('resize', () => {
        this.tosetdom()
      })
    },
    //
    getmenus() {
      $.ajax({
        url: '/aappii_file/redtheme.json?times=' + new Date().getTime(),
        success: res => {
          this.ifhidden = ''
          this.$setmenu(res)
          this.menusarr = this.$getmenu()
        }
      })
    }
  },
  mounted() {
    this.times()
    this.domset()
  }
}
</script>

<style scoped>
.fr {
  float: right;
}

.bgs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  /* background: linear-gradient(to bottom, #21afe7, #ffffff); */
  background: url(./assets/bgs.jpg) no-repeat center;
  background-size: cover;
  z-index: -1;
}

.bgs:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
}

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding-bottom: 2px;
  height: 80px;
  background-color: red;
  z-index: 5;
  /* box-shadow: 0 0 10px 0 #333; */
}

.topright {
  position: fixed;
  top: 100px;
  left: 0;
  right: 20px;
  min-width: 378px;
  text-align: center;
  color: #fff;
}

.numsize {
  font-size: 70px;
}

.bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 7;
  pointer-events: none;
}

.enters {
  opacity: 1;
  animation: toshow 1000ms forwards;
}

.heights {
  transition: 300ms;
}

@keyframes toshow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (min-width:800px) {
  .heights {
    height: 300px;
  }
}

@media (min-width:1200px) {
  .heights {
    height: 370px;
  }
}

@media (max-width:800px) {
  .heights {
    height: 200px;
  }
}

@media (max-width:500px) {
  .heights {
    height: 130px;
  }
}
</style>